<template>
    <div class="detail">
        <main class="content_box wrap">
            <div class="articleContent">
                <div class="articlDetail">
                    <h1>Terms of Use</h1>

                    <h3>Introduction</h3>
                    <p>Welcome to our website! By accessing and using our site, you agree to be bound by these Terms of Use, which outline the rights and responsibilities of both you and our company. Please take a few minutes to review these terms carefully, as they affect your use of our site and the services we offer.</p>

                    <h3>The Agreement</h3>
                    <p>These Terms of Use are a legally binding agreement between you and our company, outlining the terms and conditions under which you may use our site and services. By using our site, you signify your acceptance of these terms, including any amendments we may make from time to time. If you don't agree to these terms, please don't use our site.</p>

                    <h3>Use Restrictions</h3>
                    <p>Our site and all content, information, and materials contained within are our copyrighted property or that of our suppliers and licensors. You agree not to copy, reproduce, or distribute any content from our site without our permission. You must also use our site only for personal, non-commercial purposes and in accordance with all applicable laws and regulations.</p>

                    <h3>Linking to Third-Party Websites</h3>
                    <p>When you click on links to external websites, you leave our site and access sites that are not under our control. We are not responsible for the content, security, or policies of these sites. By clicking on such links, you acknowledge that our company is not liable for any damages or losses you may incur as a result of interacting with these sites.</p>

                    <h3>Electronic Communications</h3>
                    <p>By communicating with us electronically, you consent to receive communications from us in an electronic format. We may communicate with you via email or by posting notices on our site. You agree that electronic notices satisfy any legal requirement for written communication.</p>

                    <h3>Policy Restrictions</h3>
                    <p>You must not use our site in a way that impairs or damages our infrastructure, causes unreasonable loads, or interferes with other users' enjoyment of our site. This includes using spiders or other automated systems to access our site in a manner that sends more requests than a human can produce in the same time frame using a conventional browser.</p>

                    <h3>Indemnification</h3>
                    <p>By using our site, you agree to indemnify and hold harmless our company, its officers, directors, employees, contractors, affiliates, and suppliers from any claims, losses, or damages arising from your breach of these Terms of Use or your use of our site.</p>

                    <h3>Limitation of Liability</h3>
                    <p>Our company is not liable for direct, indirect, incidental, special, punitive, or consequential damages arising from or related to your use of our site, including claims for lost profits, even if we have been advised of the possibility of such damages. Our maximum liability to you is limited to $100</p>

                    <h3>General Provisions</h3>
                    <p>These Terms of Use, along with any other notices and policies on our site, contain the entire understanding between you and our company. They supersede any prior agreements or understandings, whether written or oral, and govern your use of our site. By using our site, you acknowledge that you have read, understood, and agree to be bound by these Terms of Use.</p>
                </div>
                <div class="aside">
            <section class="relatedPosts">
                <div class="categoryTitle">
                    <h2 class="heading">
                            Related Articles
                    </h2>
                </div>
                <article class="post subPosts" v-for="(item,index) in trendingArticles" :key="index">
                    <div class="media">
                        <router-link to="/" @click="toDeatil(item)" :title="item.newsTitle">
                                <div class="bgImg bgBox4 lazyloaded"
                                :data-bgset="`${item.imgUrl} 450w, ${item.imgUrl} 450w`"
                                        :data-bgsrc="item.imgUrl"
                                        :style="{'background-image':`url(${item.imgUrl})`}"
                                        data-sizes="(max-width: 135px) 100vw, 135px"
                                    >
                                </div>
                            </router-link>
                    </div>
                    <div class="postsText">
                            <h4 class="postsTitle">
                                <router-link to="/" @click="toDeatil(item)" >
                                        {{ item.newsTitle }}
                                    </router-link>
                            </h4>

                            <time class="postsDate" :datetime="item.publicTime">{{ item.publicTime }}</time>
                        </div>
                </article>

            </section>
            <div class="AFC">
                AFC广告
            </div>
                    </div>
            </div>
        </main>

    </div>
</template>

<script setup>
import { ref, onMounted, inject } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { articleData } from '@/utils/common.js'

const route = useRoute()
const router = useRouter()
// 共享侧边栏
const trendingArticles = inject("trendingArticles")




const toDeatil = (item) => {
    let title = item.newsTitle.replaceAll(' ', '-')
    router.push(`/detail/${item.classfy}/${title}/${item.id}`)
}


</script>

<style lang="scss">
$text-color1: #1c1c1c;
$text-color2: #696575;
$text-color3: #45414b;

.detail {
    margin-top: 20px;

    .content_box {
        display: flex;
        justify-content: space-between;

        .articleContent {
            color: $text-color1;
            font-size: 18px;
            display: flex;
            justify-content: space-between;
            .articlDetail {
                h1.title {
                    color: $text-color2;
                    margin: 15px 0;
                    font-size: 36px;
                    line-height: 1.24;
                    letter-spacing: -0.005em;
                    font-weight: 500;
                    line-height: 1.2;
                }

                .author {
                    font-size: 12px;
                    letter-spacing: 1px;

                    .type {
                        letter-spacing: 1.5px;
                        font-weight: 700;
                    }
                }

                img {
                    margin: 20px 0;
                    width: 100%;
                    border-radius: 4px;
                    min-width: 300px;
                }

                p {
                    margin-bottom: 25px;
                }
                h1{
                    font-size: 2em;
                    margin-bottom: 25px;
                    color: $text-color3;
                }
                h2 {
                    font-size: 1.285em;
                    margin-bottom: 25px;
                    color: $text-color3;
                }

                h3 {
                    font-size: 1.125em;
                    color: $text-color3;
                    margin: 27px 0 15px 0;
                }

                ul {
                    margin: 28px 0 28px 35px;

                    li {
                        margin-bottom: 7px;
                        list-style: disc !important;

                        /* 使用实心点来表示列表项 */
                        &::marker {}
                    }

                }

                .subTitle {
                    a {
                        color: #336df4;
                    }
                }
            }
       
        }
    }
}
</style>